<template>
    <div :class="classes" :style="containerStyle">
        <slot />
    </div>
</template>
<script setup>
const props = defineProps({
    // 是否使用 flex 布局
    flex: {
        type: Boolean,
        default: false,
    },
    // 上方距离
    top: {
        type: [Number, String],
        default: 0,
    },
    // padding值
    padding: {
        type: [Number, String],
        default: 0,
    },
    // 样式
    style: {
        type: [Object, String],
        default: null,
    },
});

const classes = computed(() => {
    return ['z-button-group', { 'z-button-group-flex': props.flex }];
});

const containerStyle = computed(() => {
    return {
        padding: `${props.padding}`,
        paddingTop: `${props.top}px`,
        ...props.style,
    };
});
</script>
<style lang="scss">
.z-button-group {
    &-flex {
        display: flex;
        justify-content: space-between;
    }
}
</style>